<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>已审批详情</title>
    <link href="../css/font.css" type="text/css" rel="stylesheet">
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <!--block[hdcss]-->

    <!--block[hdcss]end-->
</head>
<body>
<!--block[content]-->
<section class="wrap">
    <div class="page">
        <!--<header class="hd">头部 </header>-->

        <ul class="m-info">

        </ul>
        <div class="m-tlt-s1">
            审批意见
        </div>

        <ul class="m-list m-list-reply" id="m-list-reply">
            <li>
                <div class="thumb"><img src="../img/1.jpg" alt=""></div>
                <div class="cont">
                    <div class="info">
                        <span class="jobTitle">杨副教授</span>
                        <span class="date">2017-05-01&nbsp;15:33</span>
                    </div>
                    <div class="reply">
                        准时到办公室来找我
                    </div>

                </div>
            </li>

            <li>
                <div class="thumb"><img src="../img/1.jpg" alt=""></div>
                <div class="cont">
                    <div class="info">
                        <span class="jobTitle">杨副教授</span>
                        <span class="date">2017-05-01&nbsp;15:33</span>
                    </div>
                    <div class="reply">
                        准时到办公室来找我
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>
<footer class="ft">底部</footer>
<div class="m-fixed-reply">
    <label>回复</label>
    <input type="text" id="iptReply" />
    <a href="javascript:void(0)" class="u-btn" id="send">发送</a>
</div>
<script type="text/tmpl" id="jTmpl_list">
    <li>
        <div class="list-item">约见人</div>
        <span class="list-val"> {{name.first}}</span>

    </li>
    <li>
        <div class="list-item">标题</div>
        <span class="list-val"> 商量某事情</span>

    </li>
    <li>
        <div class="list-item">事由</div>
        <span class="list-val"> 由于某某某原因，需要和杨副院长当面沟通关于某某某的问题，希望能及时回复。</span>
    </li>
    <li>
        <div class="list-item">约见日期</div>
        <span class="list-val"> 2017-05-08  9：00</span>

    </li>
    <li>
        <div class="list-item">时长</div>
        <span class="list-val"> 0.5小时</span>

    </li>
    <li>
        <div class="list-item">联系方式</div>
        <span class="list-val">131425034325</span>
    </li>
</script>
<!--block[content]end-->
<script src="../js/lib/zepto.min.js" type="text/javascript"></script>
<script src="../js/lib/mustache.js" type="text/javascript"></script>
<script src="../js/plugin/juicer-min.js" type="text/javascript"></script>
<script type="text/javascript">

    Date.prototype.Format = function (fmt) { //author: meizz 
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    const tpl = $('#jTmpl_list').html();
    let data = {
        "name": {
            "first": "Michael",
            "last": "Jackson"
        },
        "age": "RIP"
        }

    let element = Mustache.render(tpl, data);
    $('.m-info').html(element);

    var iptReply = $('#iptReply').val();

    var time = new Date().Format("yyyy-MM-dd hh:mm:ss");

    let str = (name,txt) => {
        time = new Date().Format("yyyy-MM-dd hh:mm");
        return `<li>
                <div class="thumb"><img src="../img/1.jpg" alt=""></div>
                <div class="cont">
                    <div class="info">
                        <span class="jobTitle">`+name+`</span>
                        <span class="date">`+time+`</span>
                    </div>
                    <div class="reply">
                        `+txt+`
                    </div>
                </div>
            </li>`;
    }

    $('#send').on('click',function(){
        let val = $('#iptReply').val();
        if(val == ''){
            alert('留言不能为空');
            return false;
        }

        var htmls = str('111',val);
        $('.m-list-reply').append(htmls);

        $('#iptReply').val('');
    })
</script>
<!--block[endscript]end-->
</body>
</html>